<template>
	<div>
		<!-- <h2>菜品管理</h2> -->
		<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column label="序号" prop="id" width="50" />
			<el-table-column prop="typeOfDishes" label="菜品分类名称" width="120"/>
		
			<el-table-column align="right">
				<template #header>
					<el-button size="small" type="primary" @click="addDishesType()">添加菜品分类
					</el-button>
					
				</template>
				<template #default="scope">
					<el-button v-if="scope.row.isDeleted == 0" size="small" type="danger" @click="handleDelete(scope.row)">删除
					</el-button>
					<el-button v-else size="small" type="primary" @click="handleDelete(scope.row)">启用
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div><br />
			<!-- 分页 -->
			<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
				:disabled="disabled" background layout="prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
		
	</div>
</template>
<script>
	// import storage from '@/utils/localstorage'
	import qs from 'qs'
	export default {
		name: "DishesList",
		data() {
			return {
				tableData: [],
				currentPage: 1,
				pageSize: 5,
				total:0
			}
		},
		mounted() { //挂载之后执行的方法
			this.getPage();
		},
		methods:{
			getPage(){
				this.$axios.get('/dishes/type/page', {
						params: {
							pageNum: this.currentPage
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.tableData = res.data.records;
						console.log("res.data.current="+res.data.current);
						this.currentPage = res.data.current;
						this.total = res.data.total;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			handleCurrentChange(){
				this.$axios.get('/dishes/type/page', {
						params: {
							pageNum: this.currentPage
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.tableData = res.data.records;
						console.log("res.data.current="+res.data.current);
						// this.currentPage = res.data.current;
						this.total = res.data.total;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			addDishesType(){
				this.$router.push('/addDishesType')
			},
			//逻辑删除
			handleDelete(row){
				console.log("row.id="+row.id)
				if(row.isDeleted==1){//启用
					this.$axios.put( '/dishes/type/update/status',qs.stringify(row))
					.then(res=>{
						console.log("data="+res.data);
						if(res.data){
							this.$message({
								message: "修改成功",
								type: 'success'
							})
							window.location.reload();
						}else{
							this.$message({
								message: "修改失败",
								type: 'warning'
							})
						}
					}).catch(e=>{
						console.log(e);
					})
				}else{//逻辑删除
					this.$axios.delete( '/dishes/type/delete',{
						params:{
							"id":row.id
						}
					})
					.then(res=>{
						console.log("data="+res.data);
						if(res.data){
							this.$message({
								message: "逻辑删除成功",
								type: 'success'
							})
							window.location.reload();
						}else{
							this.$message({
								message: "逻辑删除失败",
								type: 'warning'
							})
						}
					}).catch(e=>{
						console.log(e);
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	
</style>
